<template>
  <div>
    <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      title="供应商信息"
      size="70%"
      :withHeader="false"
      :visible.sync="drawer"
      @close="handleClose"
      :show-close="true"
    >
      <div style="position: relative" v-loading="loading">
        <div class="drawerTitle">
          <span>供应商-详情</span>
          <div class="close" @click="handleClose">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="drawerContent" style="padding:15px 20px;">
          <div class="infoView">
            <div class="status">
              <span>状态:</span>
              <i v-if="detailsobj.status == 1">正常</i>
              <i v-else style="color: #f78989">已禁用</i>
            </div>
            <el-descriptions>
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsContent"
                label="供应商"
                >{{
                  detailsobj.supplier_name ? detailsobj.supplier_name : "-"
                }}</el-descriptions-item
              >
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsContent"
                label="联系人"
                >{{
                  detailsobj.responsible_person
                    ? detailsobj.responsible_person
                    : "-"
                }}</el-descriptions-item
              >
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsContent"
                label="联系电话"
                >{{
                  detailsobj.supplier_mobile ? detailsobj.supplier_mobile : "-"
                }}</el-descriptions-item
              >

              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsContent"
                label="等级"
                >{{
                  detailsobj.SupplierInfo
                    ? detailsobj.SupplierInfo.LevelName
                    : "-"
                }}</el-descriptions-item
              >
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsContent"
                label="覆盖区域"
                >{{ detailsobj.province_name ? detailsobj.province_name : "-"
                }}{{
                  detailsobj.city_name ? detailsobj.city_name : "-"
                }}</el-descriptions-item
              >
            </el-descriptions>
          </div>
          <div class="tabsView">
            <el-tabs v-model="activeName">
              <el-tab-pane label="基本信息" name="basic_information">
              </el-tab-pane>
              <el-tab-pane label="数据分析" name="data_analysis"> </el-tab-pane>
              <el-tab-pane label="商品信息" name="product_information">
              </el-tab-pane>
              <el-tab-pane label="发货订单" name="shipping_order">
              </el-tab-pane>
              <el-tab-pane label="售后订单" name="after_sales_orders">
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="chengeContent">
            <basic-information
              :detailsobj="detailsobj"
              v-if="activeName == 'basic_information'"
            >
            </basic-information>
            <empty
              height="65vh"
              title="后期升级功能..."
              v-if="activeName == 'data_analysis'"
            ></empty>
            <product-information
              :detailsobj="detailsobj"
              v-if="activeName == 'product_information'"
            ></product-information>
            <div v-if="activeName == 'shipping_order'">
              <el-tabs v-model="shipment_name">
                <el-tab-pane label="用户发货订单" name="user_shipment">
                </el-tab-pane>
                <el-tab-pane label="商户发货订单" name="merchant_shipment">
                </el-tab-pane>
              </el-tabs>
              <user-shipment
                :detailsobj="detailsobj"
                v-if="shipment_name == 'user_shipment'"
              ></user-shipment>
              <merchant-shipment
                :detailsobj="detailsobj"
                v-if="shipment_name == 'merchant_shipment'"
              ></merchant-shipment>
            </div>
            <div v-if="activeName == 'after_sales_orders'">
              <el-tabs v-model="after_sales_name">
                <el-tab-pane
                  label="用户售后订单"
                  name="user_after_sales_service"
                >
                </el-tab-pane>
                <el-tab-pane
                  label="商户售后订单"
                  name="merchant_after_sales_service"
                >
                </el-tab-pane>
              </el-tabs>
              <user-after-sales-service
                :detailsobj="detailsobj"
                v-if="after_sales_name == 'user_after_sales_service'"
              ></user-after-sales-service>
              <merchant-after-sales-service
                :detailsobj="detailsobj"
                v-if="after_sales_name == 'merchant_after_sales_service'"
              ></merchant-after-sales-service>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import product_information from "./components/product_information.vue";
import basic_information from "./components/basic_information.vue";
import user_shipment from "./components/user_shipment.vue";
import merchant_shipment from "./components/merchant_shipment.vue";
import merchant_after_sales_service from "./components/merchant_after_sales_service.vue";
import user_after_sales_service from "./components/user_after_sales_service.vue";
import { getSupplierInfo } from "@/api/supplier/index";
export default {
  name: "supplierDetails",
  components: {
    "basic-information": basic_information,
    "product-information": product_information,
    "user-shipment": user_shipment,
    "merchant-shipment": merchant_shipment,
    "user-after-sales-service": user_after_sales_service,
    "merchant-after-sales-service": merchant_after_sales_service,
  },
  data() {
    return {
      loading: false,
      supplierDetails: {},
      drawer: false,
      activeName: "basic_information",
      detailsobj: {},
      shipment_name: "user_shipment",
      after_sales_name: "user_after_sales_service",
    };
  },
  methods: {
    // 打开抽屉执行
    supplierDetailsWay(id) {
      this.activeName = 'basic_information'
      this.drawer = true;
      if (!isNaN(id)) {
        this.loading = true;
        getSupplierInfo({ id: id }).then((res) => {
          this.loading = false;
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg);
          }
          this.detailsobj = res.data;
        });
      }
    },
    // 关闭抽屉执行
    handleClose() {
      this.drawer = false;
    },
  },
};
</script>

<style lang="scss" >
.drawerTitle {
  position: relative;
  padding: 15px;
  background-color: #1890ff;
  color: #fff;
  .close {
    position: absolute;
    right: 30px;
    top: 15px;
    cursor: pointer;
  }
}
.drawerContent {
  padding: 30px;
  .infoView {
    position: relative;
    padding: 20px;
    border: 1px solid #efefef;
    border-radius: 5px;
    .status {
      position: absolute;
      top: 20px;
      right: 20px;
      span {
        font-size: 14px;
        color: #4e5969;
        font-weight: 700;
      }
      i {
        font-style: normal;
        font-size: 14px;
        color: #85ce61;
        font-weight: 700;
        margin-left: 10px;
      }
    }
    .descriptionsLabel {
      width: 65px;
      font-size: 14px;
      color: #4e5969;
      font-weight: 700;
    }
    .descriptionsContent {
      font-size: 14px;
      color: #000;
      font-weight: 700;
    }
  }
  .tabsView {
    margin-top: 10px;
  }
  .el-tabs__nav-wrap::after {
    background-color: #dfe4ed00;
  }
}
</style>
